<template>
	<div class="centeractionrank">
		<div class="header">
			<div class="header_back" @click="goback"></div>
			<p class="header_caption">裂变数据排行</p>
			<div class="header_space"></div>
		</div>
		<div class="range">
			<div class="range_switch">
				<div v-for="(item, index) in timeRange" :key="index" @click="switchViewed(index, item.value)"
					 :class="['range_switch_item', {active:index==viewedActive}]">{{item.name}}
				</div>
			</div>
			<div class="range_datepicker">
				<p class="range_datepicker_label">自定时间</p>

				<p class="range_datepicker_item">
					<app_date_picker :dateVal.sync="start_time" :placeholder="start_time_str" @change="timeConfirm"></app_date_picker>
				</p>
				<p class="range_connector">-</p>
				<p class="range_datepicker_item">
					<app_date_picker :dateVal.sync="end_time" :placeholder="end_time_str"  @change="timeConfirm"></app_date_picker>
				</p>
			</div>
			<div class="only_filter">
				<switch @change="onlyViewBtn"  color="#ffd11a" style="transform:scale(0.7)"/>
				<span>只看本企业员工</span>
			</div>
		</div>
		<div class="switch">
			<div v-for="(item, index) in classifyTab" :key="index" @click="switchTab(index)"
				 :class="['switch_item', {active:index==tabActive}]">{{item.title}}
			</div>
		</div>
		<div class="list_wrap">
			<div class="list_title">
				<div v-for="item in titleData[tabActive]" :key="item.id">{{ item }}</div>
			</div>
			<!--0-->
			<div class="list_body" v-for="(item, index) in browse_data.list" :key="item.id">
				<div>
					<i v-if="index < 3" :class="'icon_list icon_list' + (index + 1)"></i>
					<span v-else class="icon_rank">{{ index + 1 }}</span>
				</div>
				<div class="list_user_info">
					<div class="list_head">
						<img :src="`${constant.imgUrl}center/head.png`" alt>
					</div>
					<p class="list_new_name ellipsis_line_com">{{ item.nick_name }}</p>
					<span class="list_tag" v-if="item.relation_type == 1">员工</span>
				</div>
				<div>
					<p class="text_sub_com">{{ item.total_view_count }}次</p>
				</div>
			</div>
			<!--1-->
			<div class="list_body" v-for="(item, index) in forward_data.list" :key="item.id">
				<div>
					<i v-if="index < 3" :class="'icon_list icon_list' + (index + 1)"></i>
					<span v-else class="icon_rank">{{ index + 1 }}</span>
				</div>
				<div class="list_user_info">
					<div class="list_head">
						<img :src="`${constant.imgUrl}center/head.png`" alt>
					</div>
					<p class="list_new_name ellipsis_line_com">{{ item.nick_name }}</p>
					<span class="list_tag" v-if="item.relation_type == 1">员工</span>
				</div>
				<div>
					<p class="text_sub_com">{{ item.num }}次</p>
				</div>
			</div>
			<!--2-->
			<div class="list_body" v-for="(item, index) in cart_data.list" :key="item.id">
				<div>
					<i v-if="index < 3" :class="'icon_list icon_list' + (index + 1)"></i>
					<span v-else class="icon_rank">{{ index + 1 }}</span>
				</div>
				<div class="list_user_info">
					<div class="list_head">
						<img :src="`${constant.imgUrl}center/head.png`" alt>
					</div>
					<p class="list_new_name ellipsis_line_com">{{ item.nick_name }}</p>
					<span class="list_tag" v-if="item.relation_type == 1">员工</span>
				</div>
				<div>
					<p class="text_sub_com">{{ item.num }}单</p>
				</div>
			</div>
			<view v-if="noMore" class="noMore">没有更多了</view>
		</div>
	</div>
</template>
<script>
import { getRankList, getShareList, getBrowseList } from '@/api/center'
import app_date_picker from '@/components/app_date_picker.vue'
export default {
	name: 'CenterActionRank',
	components: {
		app_date_picker
	},
	data() {
		return {
			constant: this.$constant,
			timeRange: [{ name: '昨天', value: 'yesterday' }, { name: '近一周', value: 'recent_week' }, {
				name: '近一月',
				value: 'recent_month'
			}, { name: '全部时间', value: '' }],
			timeValue: 'yesterday',
			classifyTab: [{ title: '浏览量排行' }, { title: '转发排行' }, { title: '预约排行' }],
			titleData: [['排名', '转发人', '带来的浏览量'], ['排名', '转发人', '转发次数'], ['排名', '推荐人', '推荐预约单量']],
			viewedActive: 0,
			tabActive: 0,
			start_time_str: '开始时间',
			end_time_str: '结束时间',
			start_time: null,
			end_time: null,
			onlyViewStatus: false,
			noMore: false,
			// 预约列表
			cart_data: {
				list: [],
				loading: false,
				finished: false,
				page: 1
			},
			forward_data: {
				list: [],
				loading: false,
				finished: false,
				page: 1
			},
			browse_data: {
				list: [],
				loading: false,
				finished: false,
				page: 1
			}
		}
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.init()
	},
	// 加载更多
	onReachBottom() {
		this.getComList()
	},
	onLoad(option) {
		this.option = option
		this.init()
	},
	methods: {
		init() {
			let index = this.option.tabIndex
			let sourcetype = this.option.sourcetype
			if (sourcetype == 'centerRank') {
				index = index || 0
				this.viewedActive = index
				this.tabActive = index
			} else {
				index = index || 0
				this.viewedActive = 1
				this.tabActive = index
				this.timeValue = 'recent_week'
			}

			this.resGetList()
		},
		switchViewed(index, value) {
			this.viewedActive = index
			this.timeValue = value
			this.resGetList()
		},
		timeConfirm(val) {
			if (this.start_time && this.end_time) {
				this.commonJS.debounce(this.getComList(), 1000)
			}
		},
		onlyViewBtn(e) {
			this.onlyViewStatus = e.target.value
			this.resGetList()
		},

		switchTab(index) {
			this.tabActive = index
			this.resGetList()
		},

		// 获取列表
		getComList() {
			let host_data, host_fn, that = this
			if (that.tabActive == 0) {
				host_data = that.browse_data
				host_fn = getBrowseList
			} else if (that.tabActive == 1) {
				host_data = that.forward_data
				host_fn = getShareList
			} else if (that.tabActive == 2) {
				host_data = that.cart_data
				host_fn = getRankList
			}
			// 请求
			let params = {
				page: host_data.page,
				limit: 10
			}
			if (that.timeValue) {
				params.stimeType = that.timeValue
			}
			if (that.start_time && that.end_time) {
				params.stime = that.start_time
				params.etime = that.end_time
			}
			if (that.onlyViewStatus) {
				params.relation_type = '1'
			}
			that.noMore = false
			host_fn(params).then(res => {
				if (res.status === 'success') {
					let data = res.data
					host_data.list = host_data.list.concat(data.list)
					if (data.list.length != 0 && data.list.length >= params.limit) {
						host_data.page++
					} else {
						that.noMore = true
						host_data.finished = true
					}

					host_data.loading = false
				}
				uni.stopPullDownRefresh()
			})
		},
		// 清除列表状态
		clearHostData() {
			this.cart_data = {
				list: [],
				finished: false,
				loading: false,
				page: 1
			}
			this.forward_data = {
				list: [],
				finished: false,
				loading: false,
				page: 1
			}
			this.browse_data = {
				list: [],
				finished: false,
				loading: false,
				page: 1
			}
		},
		resGetList() {
			this.clearHostData()
			this.getComList()
		},
		goback() {
			uni.navigateBack()
		}

	}
}
</script>

<style lang="scss" scoped>
	.centeractionrank{
		background-color: #f5f5f5;
		.only_filter {
			display: flex;
			align-items: center;
			margin-top: 20px;

			.only_view {
				font-size: 50px;
				margin-right: 20px;
			}

			.only_view.active {
				color: #ffd11a;
			}
		}

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 40px;
			width: 100%;
			height: 117px;
			background-color: #fff;
			box-sizing: border-box;
			.header_back {
				display: inline-block;
				width: 20px;
				height: 30px;
				background: url($imgUrl +'center/back.png') center center / 100% 100% no-repeat;
			}

			.header_caption {
				font-size: 35px;
				color: #030303;
			}

			.header_space {
				display: inline-block;
				width: 26px;
				height: 45px;
			}
		}

		.range {
			margin-top: 26px;
			padding: 40px 3% 60px;
			background-color: #fff;
			box-sizing: border-box;
			.range_switch {
				width: 100%;
				height: 60px;
				font-size: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				.range_switch_item {
					flex: 1;
					display: inline-block;
					height: 100%;
					font-size: 24upx;
					color: #666;
					line-height:60px;
					text-align: center;
					border: 1px solid #ddd;
					box-sizing: border-box;

					&.active {
						color: #3a1b04;
						background-color: #ffd11a;
					}
					&:first-child {
						border-top-left-radius: 40px;
						border-bottom-left-radius: 40px;
					}
					&:last-child {
						border-top-right-radius: 40px;
						border-bottom-right-radius: 40px;
					}

				}
			}

			.range_datepicker {
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top:30px;
				width: 100%;

				.range_datepicker_label {
					font-size: 26upx;
					color: #ff6900;
				}

				.range_datepicker_item {
					padding-left: 26px;
					width: 230px;
					height: 60px;
					font-size: 28upx;
					color: #ccc;
					text-align: left;
					line-height: 60px;
					border: 1px solid #ddd;
					border-radius: 40px;
					box-sizing: border-box;
				}

				.range_connector {
					color: #ccc;
					font-size: 28upx;
				}

			}
		}

		.switch {
			box-sizing: border-box;
			width: 100%;
			height: 80px;
			font-size: 0;
			background-color: #fff;
			border-bottom: 1px solid #ddd;
			box-sizing: border-box;
			display: flex;
			.switch_item {
				flex: 1;
				position: relative;
				display: inline-block;
				height: 100%;
				text-align: center;
				line-height: 80px;
				font-size: 28upx;
				color: #999;
				vertical-align: top;
			}

			.switch_item.active {
				color: #333;
			}
			.switch_item.active::after {
				content: "";
				display: block;
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -40px;
				width: 80px;
				height: 7px;
				background-color: #ffd11a;
			}
		}

		.list_wrap {
			background-color: #fff;
			padding: 30px 24px 0;

			.list_title {
				display: flex;
				align-items: center;
				font-size: 24px;
				font-weight: bold;
				color: #999;
				padding: 24px 0 24px 5%;
				background-color: #f5f5f5;

				& > div:nth-child(1) {
					width: 17%;
				}

				& > div:nth-child(2) {
					width: 56%;
				}

				& > div:nth-child(3) {
					width: 22%;
				}
			}

			.van_list_item {
				// height: calc(100% - 1200px);
				// height: 800px;
				overflow-y: auto;
			}

			.list_body {
				display: flex;
				align-items: center;
				font-size: 24px;
				padding: 24px 0 24px 5%;
				border-bottom: 2px solid #ddd;
				position: relative;

				& > div:nth-child(1) {
					width: 17%;
				}

				& > div:nth-child(2) {
					width: 56%;
				}

				& > div:nth-child(3) {
					width: 22%;
				}

				.list_user_info {
					display: flex;
					align-items: center;

					.list_head {
						width: 60px;
						height: 60px;
						border-radius: 50%;

						img {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.list_new_name {
						max-width: calc(100% - 160px);
						font-size: 30px;
						margin-right: 10px;
					}

					.list_tag {
						border-radius: 8px;
						padding: 4px 6px;
						background-color: #ffd11a;
					}
				}

				.icon_rank {
					width: 48px;
					display: inline-block;
					color: #999;
					font-size: 48px;
					text-align: center;
				}
			}

			.list_body::after {
				content: '';
				display: block;
				position: absolute;
				top: 40px;
				right: 30px;
				width: 15px;
				height: 28px;
				background: url($imgUrl+ 'center/icon_right_arrow_large.png') center center / 100% 100% no-repeat;
			}
		}

		.list {
			padding-left: 0.533333rem;
			background-color: #fff;
			box-sizing: border-box;
		}

		.list_item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 1.466667rem;
			width: 100%;
		}

		.list_item:not(:last-child) {
			border-bottom: 1px solid #ddd;
		}

		.icon_list {
			display: inline-block;
			margin-right: 0.4rem;
			width:48px;
			height:60px;
			background: center center / 100% 100%;
		}

		.icon_list1 {
			background-image: url($imgUrl +'center/icon_rank1.png');
		}

		.icon_list2 {
			background-image: url($imgUrl + 'center/icon_rank2.png');
		}

		.icon_list3 {
			background-image: url($imgUrl + 'center/icon_rank3.png');
		}

		.list_rank {
			display: inline-block;
			margin-right: 0.4rem;
			width: 0.64rem;
			height: 0.8rem;
			font-size: 0.64rem;
			color: #999;
			line-height: 0.8rem;
			text-align: center;
		}

		.list_head {
			margin-right: 0.133333rem;
			width: 0.8rem;
			height: 0.8rem;
			border-radius: 50%;
		}

		.list_name {
			width: 4.533333rem;
			font-size: 0.4rem;
			color: #333;
		}

		.list_orders {
			margin-right: 0.2rem;
			width: 2rem;
			font-size: 0.4rem;
			color: #999;
			text-align: right;
		}

		.icon_list_right {
			display: inline-block;
			width: 0.2rem;
			height: 0.373333rem;
			background: url($imgUrl + 'center/icon_right_arrow_large.png') center center / 100% 100% no-repeat;
		}
	}
</style>
